<div class="module-reset">
    <template v-if="isLoading">
        <div class="m-loading-box">
            <loading></loading>
        </div>
    </template>

    <template v-if="isLoading === false">
        <web-box :title="$t('webBoxPCTitle')" :mobileTit="$t('webBoxTitle')">
            <validator :rules="rules" :parent="_self">
                <form class="m-form-page  m-form-login" name="form" action="javascript:;">
                    <div class="col-row fn-flex" style="position: relative;">
                        <label class="row-title">手机号</label>
                        <div class="p-input">
                            <div @click="select" class="w-input" style="position: relative;">
                                <input class="s-input" type="text" v-model="form.areaCode" readonly>
                                <i :class="[rotate?'normal':'trans']" class="icon icon-arrow-down"
                                    style="position: absolute; right: 0px;color: #fff;top:9px;margin-right: 10px;"></i>
                            </div>
                            <input type="text" tabindex="1" placeholder="请输入手机号码" name="phone" v-model="form.phone"
                                ref="loginNum" class="input stat-email">
                        </div>
                        <ul class="country" v-show="isCountry">
                            <li @click="country(item.tel)" v-for="item in form.addressList">
                                {{ item.cn }}({{ item.tel }})</li>
                        </ul>
                        <div class="ui-tip"></div>
                    </div>
                    <div class="col-row">
                        <label class="row-title">{{$t('verificationCode')}}</label>
                        <div class="comp-verify-code">
                            <a href="javascript:;">
                                <img :src="imgCodeSrc" @click="changeImgCode()" width="112" height="32"
                                    style="border-radius:4px;">
                            </a>
                        </div>
                        <input type="text" tabindex="2" :placeholder="$t('common.pCaptcha')" name="imgCode"
                            maxlength="4" autocomplete="off" v-model="form.imgCode" class="input-left">
                        <div class="ui-tip"></div>
                    </div>
                    <div class="col-row">
                        <label class="row-title">{{$t('emailConfirmationCode')}}</label>
                        <div class="comp-verify-code">
                            <a href="javascript:;" tabindex="3" v-if="sendingCode===false"
                                class="ui-btn ui-btn--gray ui-btn--block link" @click="sendCode()"
                                :disabled="codeLock === true">
                                {{codeBtnText}}
                            </a>
                            <a href="javascript:;" v-if="sendingCode===true"
                                class="ui-btn ui-btn--gray ui-btn--block link" disabled>
                                {{$t('common.waiting')}}...
                            </a>
                        </div>
                        <input type="text" tabindex="3" :placeholder="$t('common.pVerification')"
                            v-model="form.identifyingCode" name="identifyingCode" maxlength="6" class="input-left">
                        <div class="ui-tip"></div>
                    </div>
                    <div class="col-row fn-flex">
                        <label class="row-title">{{$t('common.password')}}</label>
                        <input type="password" tabindex="4" :placeholder="$t('common.pPass')" v-model="form.newPwd"
                            @focus="checkLoginPass" @blur="checkLoginPassBlur" name="newPwd" class="input">
                        <div class="ui-tip"></div>
                    </div>
                    <div class="col-row fn-flex">
                        <label class="row-title">{{$t('common.confirm')}}</label>
                        <input type="password" tabindex="5" :placeholder="$t('common.pRepeatPass')"
                            v-model="form.confirmNewPwd" name="confirmNewPwd" class="input">
                        <div class="ui-tip"></div>
                    </div>
                    <div class="col-row">
                        <button type="submit" tabindex="6" @click="submit()" v-if="isRequesting === false"
                            class="ui-btn ui-btn--block submit-btn">{{$t('common.confirm')}}</button>
                        <button type="submit" disabled v-if="isRequesting === true"
                            class="ui-btn ui-btn--block submit-btn">{{$t('common.waiting')}}...</button>
                    </div>
                    <!--<div class="col-row col-row&#45;&#45;tip"></div>-->
                </form>
            </validator>
        </web-box>
    </template>

</div>